<template>
	<view class="conbox">
		<view class="condz" @click="gotoadd">
			<view class="bzleft">
				<up-icon name="map" size="20px"></up-icon>
				<view v-if="!isadd" class="userinfo">
					<view class="">暂无收货地址</view>
				</view>
				<view v-else class="userinfo">
					<view class="username">
						<view class="">{{ress.realname}}</view>
						<view class="phone">{{ress.mobile}}</view>
					</view>
					<view class="">{{ress.province}}{{ress.city}}{{ress.district}}{{ress.address}}</view>
				</view>
			</view>
			<up-icon name="arrow-right"></up-icon>
		</view>
		<view class="conav">
			<view style="display: flex;
			align-items: center;">
				<image class="navimg" :src="list.image" mode=""></image>
				<view style="font-size: 14px;height: 144rpx;">
					<view class="dztit">{{list.name}}</view>
					<view class="">{{list.member_price}}积分</view>
				</view>
			</view>

			<view class="">x1</view>
		</view>
		<view class="conli">
			<!-- <view class="vernav">
				<view class="navboxa">
					<view class="">配送方式</view>
					<view class="">包邮</view>
				</view>
				<view class="boxbutta">快递发送</view>
			</view> -->
			<view class="vernav1">
				<view class="navboxa">
					<view class="">商品金额</view>
					<view class="">{{list.member_price}}</view>
				</view>
				<view class="navboxa1">
					<view class="">运费</view>
					<view class="">免运费</view>
				</view>
			</view>
			<view class="liyan">
				<view class="" style="margin-right: 30rpx;">买家留言</view>
				<input type="text" style="font-size: 14px;" placeholder="选填,请先和商家协商一致" v-model="text" />
			</view>
			
			<!-- <view class="selePay">
				<view class="tit">
					配送方式
				</view>
				<view class="">
					<u-radio-group v-model="transtype" iconPlacement="right" placement="column" borderBottom>
						<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="包邮" :name="1"></u-radio>
						<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" :disabled="true" label="快递发送" :name="2"></u-radio>
					</u-radio-group>
				</view>
			</view> -->
			<view class="selePay">
				<view class="tit">
					支付方式
				</view>
				<view class="">
					<u-radio-group v-model="paytype" iconPlacement="right" placement="column" borderBottom>
						<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="余额支付" :name="1"></u-radio>
						<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="积分支付" :name="2"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="goindex" @click="gotoindex">返回首页</view>
			<view class="cobotton">
				<view class="jif"><text style="font-size: 13px;">合计:</text>{{list.member_price}}</view>
				<view class="boxtie" @click="tijiao">提交订单</view>
			</view>
		</view>
		<up-popup :show="show" @close="close" mode="center" round="40rpx" close="close">
			<view class="pircpo">
				<view class="poptit">确认支付</view>
				<view class="pirctit">{{paytype == 1 ? '余额支付' : '积分支付'}}</view>
				<view class="pircetit">{{list.member_price}}</view>
				<view class="myprice" v-if="paytype == 1">本金余额：{{money1}}</view>
				<view class="myprice" v-else-if="paytype == 2">积分余额：{{hasscore}}</view>
				<view class="xuanz">
					<view class="qixiao" @click="close">取消</view>
					<view class="zhifu" @click="payment">支付</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import request from '../../utils/request'
	let token = ref()
	let venueId = ref()
	let id = ref('')
	let list = ref()
	let ress = ref({})
	let isadd = ref(false)
	let show = ref(false)
	let hasscore = ref('')
	let money1 = ref('')
	let tag = ref('')
	let text = ref('')
	let transtype = ref(1)
	let paytype = ref(1)
	let userinfo = ref({})
	onShow(() => {
		token.value = uni.getStorageSync('token')
		request.post('user/index', {
			header: {
				"token": token.value
			}
		}).then(res => {
			userinfo.value = res.data
			hasscore.value = res.data.hasscore
			money1.value = res.data.money1
		}).catch(err => {
			console.log(err);
		})
		const options = getCurrentPages().pop().options;
		uni.$on('customEvent', (data) => {
			if (data && data.id) {
				id.value = decodeURIComponent(data.id);
				// console.log(id.value);
			}
		});
		if (options && options.id) {
			venueId.value = decodeURIComponent(options.id)

			request.get('Productlists/read', {
				data: {
					id: venueId.value
				},
				header: {
					"token": token.value
				}
			}).then(res => {
				list.value = res.data
			}).catch(err => {
				console.log(err);
			})
		}
		if (id.value == '') {
			request.post('Transport/readd', {
				header: {
					"token": token.value
				}
			}).then(res => {
				console.log(res);
				if (res.code == 1) {
					isadd.value = true
					ress.value = res.data
				}
			}).catch(err => {
				console.log(err);
			})
		} else {
			request.post('Transport/read', {
				data: {
					id: id.value
				},
				header: {
					"token": token.value
				}
			}).then(res => {
				// console.log(res);
				ress.value = res.data
				// console.log(ress.value);
			}).catch(err => {
				console.log(err);
			})
		}

	})
	const gotoindex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const gotoadd = () => {
		uni.navigateTo({
			url: '/pages/address/address'
		})
	}
	const tijiao = () => {
		show.value = true
		const opid = list.value.id
		// console.log(list.value.id);
		
		request.post('Productlisto/preOrder', {
			data: {
				data: `product_id:${opid},number:1`
			},
			header: {  
				"token": token.value
			}
		}).then(res => {
			// console.log(res);
			tag.value = res.data
		}).catch(err => {
			console.log(err);
		})
	}
	const close = () => {
		show.value = false
	}
	const payment = () => {
		uni.requestSubscribeMessage({
			tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
			success(res) {
				request.post('Productorder/createorder', {
					data: {
						tag: tag.value,
						message: text.value,
						paytype:paytype.value
					},
					header: {
						"token": token.value
					}
				}).then(res => {
					console.log(res);
					show.value = false
					if (res.code == 1) {
						uni.showToast({
							title: '购买成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/order/order'
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			fail(err) {
				console.log(err);
				// 处理订阅失败后的逻辑
			}
		})
	}
</script>

<style scoped lang="scss">
	.conbox {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.condz {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;

	}

	.bzleft {
		width: 670rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 13px;
	}

	.username {
		display: flex;
	}

	.userinfo {
		margin-left: 30rpx;
	}

	.phone {
		margin-left: 20rpx;
	}

	.conav {
		width: 100%;
		height: 280rpx;
		background-color: #fff;
		margin-top: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.navimg {
		width: 144rpx;
		height: 144rpx;
		margin-right: 30rpx;
	}

	.dztit {
		height: 70rpx;
		line-height: 70rpx;
	}

	.conli {
		width: 100%;
		height: 280rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		background-color: #fff;
	}

	.vernav {
		width: 100%;
		height: 130rpx;
		border-bottom: 1px solid #e2e2e2;
		font-size: 14px;
	}

	.navboxa {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.navboxa1 {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.boxbutta {
		width: 100%;
		text-align: right;
		font-size: 13px;
		color: #6c6c6c;
	}

	.vernav1 {
		width: 100%;
		height: 130rpx;
		font-size: 14px;
	}

	.liyan {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.goindex {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 0 14px -5px rgba(0, 0, 0, .3);
		margin-top: 60rpx;
		margin-left: 600rpx;
		display: flex;
		font-size: 14px;
		padding: 15rpx;
		padding-left: 22rpx;
		box-sizing: border-box;
		align-items: center
	}

	.cobotton {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.jif {
		display: flex;
		align-items: center;
		margin-left: 250rpx;
		margin-right: 40rpx;
		font-size: 15px;
	}

	.boxtie {
		width: 210rpx;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: #10c696;
		text-align: center;
		font-size: 14px;
	}

	.pircpo {
		width: 610rpx;
		height: 430rpx;
	}

	.poptit {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 14px;
	}

	.pirctit {
		width: 100%;
		text-align: center;
		color: #5f5f5f;
		font-size: 12px;
	}

	.pircetit {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-weight: 500;
		font-size: 20px;
	}

	.myprice {
		width: 100%;
		text-align: center;
		font-size: 12px;
		margin-bottom: 30rpx;
	}

	.xuanz {
		height: 90rpx;
		width: 100%;
		border-top: 1px solid #e2e2e2;
		display: flex;
	}

	.qixiao {
		width: 300rpx;
		height: 90rpx;
		border-right: 1px solid #e2e2e2;
		line-height: 90rpx;
		text-align: center;
		color: #444444;
	}

	.zhifu {
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #10c696;
	}
	
	.selePay {
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	
		.tit {
			font-size: 30rpx;
			color: #3d3d3d;
			font-weight: 700;
			margin-bottom: 20rpx;
		}
	
		::v-deep .u-radio {
			margin-bottom: 20rpx;
		}
	
		::v-deep .u-radio:last-child {
			border: none;
			margin-bottom: 0;
		}
	}
</style>